<template>
	<div class="container">
		<Breadcrumb/>
		<a-card class="data-card ">
			<a-row>
				<a-col :flex="1">
					<a-form :model="formModel" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
						<a-row :gutter="20">
							<a-col :span="5">
								<a-form-item field="dictLabel" label="字典标签">
									<a-input v-model="formModel.dictLabel" placeholder="请输入字典标签" allow-clear />
								</a-form-item>
							</a-col>
							<a-col :span="5">
								<a-form-item field="dictType" label="字典类型">
									<a-select v-model="formModel.dictType" :options="dictTypes" :field-names="dictTypesFields" placeholder="请选择字典类型" allow-clear />
								</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-space :size="18">
									<a-button @click="openAdd" type="primary">
										<template #icon>
											<icon-plus />
										</template>
										新增
									</a-button>
									<a-button @click="onPageChange(1)" type="primary">
										<template #icon>
											<icon-search />
										</template>
										搜索
									</a-button>
									<a-button @click="reset">
										<template #icon>
											<icon-refresh />
										</template>
										重置
									</a-button>
								</a-space>
							</a-col>
						</a-row>
					</a-form>
				</a-col>
			</a-row>
			<a-divider style="margin-top: 0" />
			<a-table row-key="id" :loading="loading" page-position='bottom' :pagination="pagination" :columns="columns" :data="renderData" :bordered="false" @page-change="onPageChange" @page-size-change="onPageSizeChange">
				<template #option="{ record }">
					<a-space :size="18">
						<a-button @click='openEdit(record)' type="outline">
							编辑
						</a-button>
						<a-button status="danger" @click='openDelete(record)'>
							删除
						</a-button>
					</a-space>
				</template>
			</a-table>
		</a-card>
		<a-modal v-model:visible="addShow" @cancel="handleCancel" :on-before-ok="handleCheck" :mask-closable='false' unmountOnClose>
			<template #title>
				字典
			</template>
			<a-form ref="addModel" :rules="rules" :model="addForm">
				<a-form-item field="dictType" label="字典类型">
					<a-select v-model="addForm.dictType" :options="dictTypes" :field-names="dictTypesFields" placeholder="请选择字典类型" />
				</a-form-item>
				<a-form-item field="dictLabel" label="字典标签">
					<a-input v-model="addForm.dictLabel" size='large' placeholder="请输入字典标签" />
				</a-form-item>
				<a-form-item field="dictValue" label="字典键值">
					<a-input v-model="addForm.dictValue" size='large' placeholder="请输入字典键值" />
				</a-form-item>
				<a-form-item field="dictSort" label="字典排序">
					<a-input-number v-model="addForm.dictSort" size='large' placeholder="请输入字典排序" />
				</a-form-item>
				<a-form-item field="remark" label="字典备注">
					<a-input v-model="addForm.remark" size='large' placeholder="请输入字典备注" />
				</a-form-item>
			</a-form>
		</a-modal>
	</div>
</template>

<script lang="ts" setup>
	import { computed, ref, reactive } from 'vue';
	import { Message, Modal } from '@arco-design/web-vue';
	import useLoading from '@/hooks/loading';
	import { dictDataList, addDictData, updateDictData, deleteDictData, dictTypeList } from '@/api/dict.ts'
	import type {
		TableColumnData
	} from '@arco-design/web-vue/es/table/interface';

	const {
		loading,
		setLoading
	} = useLoading(true);

	const generateDataModel = () => {
		return {
			dictDataId: '',
			dictLabel: '',
			dictValue: '',
			dictSort: null,
			dictType: '',
			remark: '',
		};
	};

	const rules = {
		dictLabel: [{
			required: true,
			message: '请输入字典标签'
		}],
		dictValue: [{
			required: true,
			message: '请输入字典键值'
		}],
		dictSort: [{
			required: true,
			message: '请输入字典排序'
		}, {
			type: 'number',
			message: '请输入数字'
		}],
		dictType: [{
			required: true,
			message: '请选择字典类型'
		}],
	};
	const addForm = ref(generateDataModel());
	const addShow = ref(false);
	const addModel = ref();

	const openAdd = () => {
		addShow.value = true;
		addForm.value = generateDataModel()
	}

	const handleCheck = (done) => {
		if(loading.value) {
			done(false);
			return;
		}
		setLoading(true);
		setTimeout(() => {
			setLoading(false);
		}, 1500)
		addModel.value.validate(async(errors: undefined | Record < string, ValidatedError > ) => {
			if(!errors) {
				if(addForm.value.dictDataId) {
					updateDictData(addForm.value).then(res => {
						if(res.code == '200') {
							Message.success({
								content: res.message,
							});
							Message.success({
								content: res.message,
							});
							done(true)
							reset();
						} else {
							done(false)

						}
					})
				} else {
					addDictData(addForm.value).then(res => {
						if(res.code == '200') {
							Message.success({
								content: res.message,
							});
							done(true)
							reset();
						} else {
							done(false)
						}
					})
				}
			} else {
				done(false)
			}
		})
	}

	const openEdit = (item) => {
		addForm.value = Object.assign({}, item)
		addShow.value = true;
	}

	const handleCancel = () => {
		addShow.value = false;
	}
	const openDelete = (item) => {
		Modal.confirm({
			title: '提示',
			content: '确认删除吗？',
			onOk() {
				deleteDictData({
					dictDataId: item.dictDataId
				}).then(res => {
					if(res.code == '200') {
						Message.success({
							content: res.message,
						});
						fetchData()
					}
				})
			},
		})

	}

	const columns = computed < TableColumnData[] > (() => [{
			title: '字典排序',
			dataIndex: 'dictSort',
			align: 'center'
		}, {
			title: '字典标签',
			dataIndex: 'dictLabel',
			align: 'center'
		},
		{
			title: '字典键值',
			dataIndex: 'dictValue',
			align: 'center'
		},
		{
			title: '字典类型',
			dataIndex: 'dictType',
			align: 'center'
		},
		{
			title: '备注',
			dataIndex: 'remark',
			align: 'center'
		},
		{
			title: '创建时间',
			dataIndex: 'createTime',
			align: 'center'
		},
		{
			title: '操作',
			dataIndex: 'option',
			slotName: 'option',
			align: 'center'
		},
	]);

	const generateFormModel = () => {
		return {
			dictLabel: '',
			dictType: '',
		};
	};

	const formModel = ref(generateFormModel());
	const renderData = ref([]);

	const basePagination: Pagination = {
		current: 1,
		pageSize: 10,
		total: 0

	};
	const pagination = reactive({
		...basePagination,
		'hide-on-single-page': true,
		'show-total': true,
		'show-jumper': true,
		'show-page-size': true,
	});

	const fetchData = async() => {
		setLoading(true);
		try {
			const data = {
				pageNum: pagination.current,
				...pagination,
				...formModel.value,
			}
			dictDataList(data).then(res => {
				renderData.value = res.data.list;
				pagination.total = res.data.total;
				pagination.current = res.data.current;
			})
		} catch(err) {
			console.log(err)
		} finally {
			setLoading(false);
		}
	};

	const onPageChange = (current: number) => {
		pagination.current = current;
		fetchData();
	};
	const onPageSizeChange = (pageSize: number) => {
		pagination.pageSize = pageSize;
		fetchData();
	};

	fetchData();
	const reset = () => {
		formModel.value = generateFormModel();
		fetchData()
	};

	const dictTypes = ref([]);
	const dictTypesFields = {
		value: 'dictType',
		label: 'dictName'
	}
	const getDictTypes = async() => {
		const data = {
			pageNum: 1,
			pageSize: 100,
		}
		dictTypeList(data).then(res => {
			dictTypes.value = res.data.list;
		})
	};

	getDictTypes()
</script>